<template>
  <div v-show="visible" class="mu-wrapper">
    <div class="mask show" v-if="modal" @click="close(true)"></div>
    <div class="form show" :class="{ customClass }" :style="{ width, top }">
      <div class="header">
        <slot name="title">
          <span>{{ title }}</span>
        </slot>
        <i
          v-show="showClose"
          class="close mu-icon-close"
          @click="close()"
        ></i>
      </div>
      <div class="main">
        <slot></slot>
      </div>
      <div>
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "mu-dialog",
  methods: {
    close(isMask) {
      if (!isMask || this.closeOnClickModal) {
        this.$emit("update:visible", !this.visible);
        this.$emit("closed");
      }
    },
  },
  props: {
    title: String,
    visible: Boolean,
    width: String,
    top: {
      type: String,
      default: "20%",
    },
    modal: {
      type: Boolean,
      default: true,
    },
    customClass: String,
    closeOnClickModal: {
      type: Boolean,
      default: true,
    },
    showClose: {
      type: Boolean,
      default: true,
    },
  },
};
</script>

<style scoped lang="scss">
@import "../variable.scss";

.mu-wrapper {
  position: fixed;
  overflow: auto;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 99999;

  .mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);

    &.show {
      animation: show-mask 0.3s linear forwards;
    }
  }

  .form {
    position: relative;
    margin: 0 auto;
    background: white;
    box-shadow: 0 0 10px #efefef;
    min-width: 300px;
    min-height: 100px;
    z-index: 1000;
    border-radius: 5px;
    padding: 10px 10px;
    transition: transform 3s linear;
    display: flex;
    flex-direction: column;

    .main {
      padding: 10px 0;
      flex: 1;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        font-size: 16px;
        font-weight: bold;
      }

      .close {
        font-size: 20px;
        cursor: pointer;

        &:hover {
          color: $blue;
        }
      }
    }

    &.show {
      animation: show-dialog 0.3s linear forwards;
    }
  }

  @keyframes show-dialog {
    0% {
      opacity: 0;
      margin-top: 0;
    }
    100% {
      opacity: 1;
      margin-top: 30px;
    }
  }

  @keyframes show-mask {
    0% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
}
</style>